<template>
  <div class="product-detail">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ name: 'ShopMain' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>商品详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="main-image">
        <el-card shadow="never" class="image-card">
          <el-image
              :src="product.img"
              fit="contain"
              class="product-image"
              lazy
              :preview-src-list="[product.img]"
          >
            <div slot="error" class="image-slot">
              <el-empty description="图片加载失败"/>
            </div>
          </el-image>
        </el-card>
      </div>

      <div class="info-and-actions">
        <div class="product-info">
          <el-card shadow="never" class="info-card">
            <div slot="header" class="product-header">
              <h3 class="store-title">{{ product.title }}</h3>
              <div class="product-description">{{ product.desc }}</div>
            </div>
            <div class="info-item">
              <label>名称：</label>
              <span class="product-name">{{ product.name }}</span>
            </div>
            <div class="info-item">
              <label>价格：</label>
              <span class="price">¥{{ product.price }}</span>
            </div>
            <div class="info-item">
              <label>库存：</label>
              <span class="stock">{{ product.stock }}件</span>
            </div>
          </el-card>
        </div>

        <div class="store-info">
          <el-card shadow="never" class="info-card">
            <h1 class="product-title">门店信息</h1>
            <div class="info-item">
              <label>名称：</label>
              <span>{{ stores.storeName }}</span>
            </div>
            <div class="info-item">
              <label>类别：</label>
              <span>{{ stores.type }}</span>
            </div>
            <div class="info-item">
              <label>地址：</label>
              <span>{{ stores.storeAddress }}</span>
            </div>
            <div class="info-item">
              <label>状态：</label>
              <span>{{ stores.storeStatus }}</span>
            </div>
            <div class="info-item">
              <label>创建时间：</label>
              <span>{{ stores.createTime }}</span>
            </div>
          </el-card>
        </div>

        <div class="action-buttons">
          <el-button type="danger" icon="el-icon-shopping-cart" @click="buy">
            立即购买
          </el-button>
          <el-button
              type="danger"
              icon="el-icon-shopping-cart"
              @click="addToCart"
          >
            添加到购物车
          </el-button>
        </div>
      </div>
    </div>

    <!-- 评论区 -->
    <div class="review-section">
      <h2 class="review-title">用户评论</h2>
      <div class="review-list">
        <div
            v-for="(review, index) in reviews"
            :key="index"
            class="review-item"
        >
          <div class="review-header">
            <span class="review-user">{{ review.username }}</span>
            <span class="review-date">{{ review.date }}</span>
          </div>
          <div class="review-content">{{ review.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {loadStoreById} from "@/api/storeApi";
import {mapMutations, mapGetters} from "vuex";
import {addCartItem} from "@/api/cartsApi";

export default {
  data() {
    return {
      product: {},
      isFavorite: false,
      stores: {
        storeName: "小米旗舰店",
        type: "电子产品",
        storeAddress: "北京市海淀区中关村大街1号",
        storeStatus: "营业中",
        createTime: "2023-01-01",
      },
      reviews: [
        {
          username: "张三",
          date: "2025-04-15",
          content: "非常满意，商品质量很好，性价比超高！",
        },
        {
          username: "李四",
          date: "2025-04-14",
          content: "物流很快，包装也很仔细，赞一个！",
        },
        {
          username: "王五",
          date: "2025-04-13",
          content: "商品和描述一致，很喜欢，还会再来购买！",
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
      getProduct: "user/getProduct", // 确保这里正确映射了 user 模块的 getProduct
    }),
  },
  created() {
    this.readProduct();
    this.loadStore();
  },
  methods: {
    ...mapMutations({
      loadProduct: "user/LOAD_PRODUCT",
    }),
    readProduct() {
      // 从vuex中加载一次product
      this.loadProduct();

      // 通过 getters 读取 product 数据
      this.product = this.getProduct;
      console.log("product", this.product);
    },
    // 请求得到商店数据
    loadStore() {
      const queryData = {
        storeId: this.product.storeId,
      };
      loadStoreById(queryData)
          .then((res) => {
            this.stores = res.data;
          })
          .catch((err) => {
            console.log("异常", err.message);
          });
    },
    buy() {
      addCartItem(this.product.productId,1)
          .then(() => {
            this.$message.success("添加成功");
          })
          .catch((error) => {
            console.error("添加购物车失败:", error);
            this.$message.error("添加购物车失败");
          });
      // 添加到购物车的逻辑
      this.$message.success("成功购买");
      this.$router.push({
        name: "ShopCart",
      });
    },
    addToCart() {
      addCartItem(this.product.productId,1)
          .then(() => {
            this.$message.success("添加成功");
          })
          .catch((error) => {
            console.error("添加购物车失败:", error);
            this.$message.error("添加购物车失败");
          });
      // 添加到购物车的逻辑
      this.$message.success("已添加到购物车");
    },
  },
};
</script>

<style scoped>
.product-detail {
  max-width: 1200px;
  margin: 140px auto;
  padding: 20px;
  border-radius: 12px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.breadcrumb {
  margin-bottom: 20px;
}

.main-content {
  display: flex;
  align-items: flex-start;
}

.main-image {
  width: 40%;
  margin-right: 20px;
}

.image-card {
  border-radius: 12px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 400px;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.product-image:hover {
  transform: scale(1.05);
}

.info-and-actions {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-info,
.store-info {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.store-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #ff4081;
}

.info-item {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 左对齐 */
  margin-bottom: 10px;
}

.info-item label {
  font-weight: bold;
  color: #666;
  margin-right: 8px; /* 添加一些间距 */
  white-space: nowrap; /* 防止换行 */
  width: 80px; /* 固定宽度 */
  text-align: left; /* 让 label 文本右对齐 */
}

.info-item span {
  display: inline-block; /* 使内容可以换行 */
  word-break: break-word; /* 允许在单词内换行 */
}

.price {
  color: #ff4081;
  font-size: 18px;
}

.stock {
  color: #666;
  font-size: 14px;
}

.action-buttons {
  margin-top: 40px;
  display: flex;
  align-items: center;
  padding: 20px;
}

.action-buttons .el-button {
  margin-right: 15px;
  transition: background-color 0.3s ease;
}

.action-buttons .el-button:hover {
  background-color: #f56c6c;
}

.action-buttons .el-button:last-child {
  margin-right: 0;
}

/* 评论区样式 */
.review-section {
  margin-top: 40px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.review-title {
  font-size: 20px;
  margin-bottom: 20px;
}

.review-list {
  list-style: none;
  padding: 0;
}

.review-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.review-user {
  font-weight: bold;
}

.review-date {
  color: #999;
  font-size: 12px;
}

.review-content {
  font-size: 14px;
  color: #333;
}
</style>